<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" rel="stylesheet">

    <!--href="../static/css/me.css"  th:href="@{/css/me.css}" type="text/css"-->
<!--  <link rel="stylesheet" href="../static/css/me.css"  th:href="@{/css/me.css}" type="text/css"   >-->


    <title>首页</title>
</head>

<body >
    
<!-- -->

 <nav th:replace="_fragments::menu(1)" class="ui inverted attached segment m-padded-tb-mini">
<div class="ui container">
    <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item" > Blog</h2>
        <a href="#" class="m-item  item m-mobile-hide "><i class=" home icon"></i> 首页</a>
        <a href="#" class="m-item item m-mobile-hide"><i class=" idea icon"></i> 分类</a>
        <a href="#" class="m-item item m-mobile-hide"><i class=" tags icon"></i> 标签</a>
        <a href="#" class="m-item item m-mobile-hide"><i class=" clone icon"></i> 归档</a>
        <a href="#" class="m-item item m-mobile-hide"><i class=" info icon"></i> 关于我</a>
        <div class="right item m-mobile-hide">
            <div class="ui icon inverted transparent input">
                <input type="text" placeholder="Search....">
                <i class="search link icon"></i>
            </div> 
        </div>
    </div>
</div>

    <a href="#" class="ui menu toggle black button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
    </nav>
    
<!--中间内容-->

    <div class="m-padded-tb-large">
        <div class="ui container">
              <div class="ui stackable  grid">
                  <!--左边博客列表-->
                  <!-- eleven wide column-->
                        <div class="eleven wide column">
                                        <!-- header-->
                                        <div class="ui top attached segment">
                                                <div class="ui middle aligned two column grid">
                                                        <div class="column">
                                                            <h3 class="ui teal header">博客</h3>
                                                        </div>
                                                        <div class="right aligned column">
                                                        共<h3 th:text="${page.size}" class="ui orange header m-inline-block m-text-thin">14</h3>篇
                                                        </div>

                                                </div>
                                        </div>
                                             <!-- |header|-->

                            <!--content -->
                            <div class="ui attached  segment">
                                <div class="ui padded vertical segment m-padded-tb-large ">

                                    <div class="ui middle aligned mobile reversed stackable grid" th:each="blog:${page.list}">

                                        <div class="ui eleven wide column"  >

                                        <h3 class="ui header m-black"  th:target="_blank"   >   <a th:href="@{/blogg/{id}(id=${blog.id})}" th:text="${blog.title}" >       你真的理解什么是财富自由吗？ </a></h3>
                                            <p class="m-text m-text2"    th:text="|${blog.content}.....|" >本文将对MyBatis-Plus进行学习，主要是对简单的增删改查、分页查询、自动填充、乐观锁、逻辑删除、性能分析进行学习。MyBatis-Pl MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生......</p>
                                            
                                            <div class="ui grid">
                                                <div class="eleven wide column">
                                                    <div class="ui horizontal link list">
                                                        <div class="item">
                                                            <!--th:src="@{${blog.user.avatar}" -->
                                                            <img src="../static/image/2.jpg.jpg"  th:src="@{${blog.user.avatar}}" class="ui avatar image" width="90px" height="90px" alt="" srcset="">
                                                                <div class="content">
                                                                    <!-- th:text="${blog.user.nickname}"-->
                                                                    <a th:href="@{/blogg/{id}(id=${blog.id})}" href="#" class="header"  >
                                                                        <span th:value = "${blog.user.username}" >Azea </span>
                                                                    </a>
                                                                </div>
                                                        </div>
                                                        <div class="item"> 
                                                            <i class="calendar icon"></i> <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}" >2017-10-01</span>
                                                        </div>

                                                       <div class="item">
                                                           <i class="eye icon"></i>  <span th:text="${blog.views}" >2384</span>
                                                        
                                                       </div>

                                                    </div>

                                                </div>
                                            
                                                <div class="right aligned five wide column">
                                                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-opaciyt-mini " th:text="${blog.type.name}" >认知升级</a>
                                                </div>
                                            </div>
                                       
                                        </div>

                                        <div class="five wide column">

                                            <a  th:href="@{/blogg/{id}(id=${blog.id})}" target="_blank">
                                                <img src="../static/image/2.jpg.jpg" class="ui rounded image" th:src="@{${blog.firstPicture}}" width="200px" height="120px" alt="" srcset="">
                                            </a>

                                        </div>

                                    </div>



                                </div>


                            </div>
                            <!-- |content|-->




                            <!-- footer-->
                            <div class="ui bottom attached segment">

                                  

                                                    <div class="ui middle aligned two column grid" th:if="${page.pageNum}>1">
                                                            <div class="column">
                                                            <a href="#"  th:href="@{/(page = ${page.pageNum}-1}" th:unless="${page.isFirstPage}" class="ui mini teal basic button">上一页</a>
                                                            </div>
                                                            <div class="right aligned column">
                                                            <a href="#"  th:href="@{/(page = ${page.pageNum}+1)}" th:unless="${page.isLastPage}" class="ui mini teal basic button">下一页</a>
                                                            </div>
                
                                                        </div>

                                   


                                </div>
                                     <!-- |footer|-->
                        </div>
                        <!-- |eleven wide column|-->

                        <!-- |five wide column|-->
                                    <div class="five wide column">
                                        <!-- 分类-->
                                         <div class="ui segment">
                                                <div class="ui secondary segment">
                                                            <div class="ui two column grid">
                                                                    <div class="column">
                                                                    <i class="idea icon"></i>分类   
                                                                    </div>

                                                                    <div class="right aligned column">
                                                                            <a  th:href="@{/types/-1}" href="#" target="_blank" >more <i class="angle double right icon"></i> </a>
                                                                    </div>

                                                            </div>

                                                    </div>

                                                    <div class="ui teal segment">

                                                        <div class="ui fluid vertical menu"  >
                                                            <a href="#" class="item"  th:href="@{/types/{id}(id = ${type.id})}" th:target="_blank" th:each="type:${types}">
                                                                <span th:text="${type.name}" > 学习日志</span>
                                                         <div class="ui basic teal left pointing label" th:text="${#arrays.length(type.blogs)}">
                                                                    13
                                                                </div>

                                                            </a>



                                                        </div>

                                                    </div>

                                         
                                         
                                         
                                         
                                         
                                         
                                                </div>     
                                     
                                     <!--标签-->
<!--
                                     <div class="ui segment m-margin-top-large">

                                            <div class="ui secondary segment">
                                                    <div class="ui two column grid">
                                                            <div class="column">
                                                            <i class="idea icon"></i>标签 
                                                            </div>

                                                            <div class="right aligned column">
                                                                <a th:href="@{/tags/-1}"  href="#" target="_blank" >more <i class="angle double right icon"></i> </a>
                                                            </div>

                                                    </div>

                                            </div>
                                                <div class="ui segment">

                                                        <a    th:each="tag:${tags}"  th:href="@{/tags/{id}(id = ${tag.id})}" href="#" class="ui basic teal left pointing label m-margin-tb-tiny">
                                                             <span th:text="${tag.name}">方法论 </span>

                                                               <div th:text="${#arrays.length(tag.blogs) }" class="detail">23</div>

                                                        </a>


                                                </div>


                                     </div>
          -->
                                        <!--|标签|-->


                                     <!--最新推荐-->

                                     <div class="ui segments m-margin-top-large">

                                            <div class="ui secondary segment">

                                              <i class="bookmark icon"></i>最新推荐

                                            </div>

                                            <div class="ui segment" th:each="blog:${recommendBlogs}">
                                                    <a href="#"   th:href="@{/blogg/{id}(id = ${blog.id})}"  target="_blank" class="m-text-thin m-black" th:text="${blog.title}" >用户故事 <i class="angle double right icon"></i> </a>
                                            </div>


                                     </div>
                                     
                                 <!--二维码-->
                                 <div class="ui horizontal divider header m-margin-top-large">扫码关注我</div>

                                 <div class="ui centered card">
                                        <img src="../static/image/1.jpg" style="" class="ui rounded image" alt="" srcset="">
                                 </div>
                                     

                              </div>
                    
                                 <!-- |five wide column|-->
            </div>
            <!-- |ui grid|-->


        </div>
 <!-- |ui container|-->



    </div>
<!--|m-padded-tb-large|-->


<!--看板娘-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

<script>
    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width": 100,
            "height": 200,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>
<!--看板娘-->


    
    <!-- 底部-->

<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">

    <div class="ui center aligned container">

        <div class="ui inverted divided stackable grid">
           
                    <div class="three wide column">
                        <div class=" centered item">
                        <img src="../../../static/image/1.jpg" class="ui rounded image" style="width: 110px;" alt="" srcset="">
                    </div>
                    </div>

                    <div class="three wide column">
                        <h4 class="ui inverted header  m-text-spaces ">最新博客 </h4>    
                        <div class="ui inverted link list">
                            <a href="#" class="item" >用户故事</a>
                            <a href="#" class="item" >用户故事</a>
                            <a href="#" class="item" >用户故事</a>
                            <a href="#" class="item" >用户故事</a>
                        
                        </div>

                 </div>

                    <div class="three wide column">
                            <h4 class="ui inverted header  m-text-spaces ">联系我 </h4>  
                            <div class="ui inverted link list">
                                    <a href="#" class="item" >Email:1401432910@qq.com</a>
                                    <a href="#" class="item" >QQ:1401432910</a>
                                    
                            </div>
                    </div>

                    <div class="seven wide column">
                            <h4 class="ui inverted header m-text-spaces ">最新博客 </h4>
                            <p>这是关于个人的博客</p>


                     </div>

        </div>
                <div class="ui inverted section divider"></div>
                <p class="m-text-thin m-text-spaces .m-opaciyt-mini ">Copyright ©2020 ABlog Designed by Azea</p>
    </div>


</footer>

<!--src="../static/js/jquery-3.4.1.min.js" -->

<!--/*/<th:block th:replace="_fragments :: script">/*/-->

    <script type="text/javascript"  th:src="@{/js/jquery-3.4.1.min.js}"  ></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
    <script>
    $(".menu.toggle").click(function(){
        $('.m-item').toggleClass('m-mobile-hide');
    }

    )
   



  
    
    </script>




</body>
</html>